import React, { Component } from 'react'
// 生命周期在组件得特定阶段自动执行得函数
// 类组件里有生命周期钩子函数，咱们先讲react17以前的生命周期，react18的生命周期
// 初始化阶段 1. constructor
           //  2.render
// 更新阶段
// 卸载阶段



 class Left extends Component {
  constructor(props){ // 初始化state
        super(props)
        console.log("constructor")
        this.state = {
            name:1
        }
  }
  componentWillMount(){ // 组件挂载前    // beforeMountd
        console.log("componentWillMount",this) // 可以获取到this,获取不到dom
        console.log(document.getElementById("span"));
  }
  render() {
    console.log("render")   // 只要修改状态(setState页面就会render)
    return (
      <div>{this.state.name}
            <span id='span'></span>
            <button onClick={()=>this.setState({ name:"lisi"})}>点击</button>
      </div>
    )
  }
  componentDidMount(){ // 组件已经挂载完毕，可以获取dom和this， // mounted
    // 网络请求，实例化插件，比如swiper或者betterScroll都在这个生命周期里
    console.log(' componentDidMount');
    console.log(document.getElementById("span"));

    // this.timmer =  setInterval(()=>{
    //     this.setState({
    //         name:this.state.name+1
    //     })
    // },100)
  }

  shouldComponentUpdate(){ // 如果不写，默认返回true 
    // 组件应该更新吗，如果返回true，组件更新，即调用render函数，如果返回false就不更新
    return true
  }
  componentWillUpdate(){  // beforeUpdata
      console.log("componentWillUpdate,组件将要去更新");
  }
  componentDidUpdate(){  // updataed
      console.log("componentDidUpdate","组件已经更新完了")
  }
  componentWillUnmount(){ // vue里有beforeDestory,destoryed
      console.log("组件将要卸载")
      this.setState({
          name:null
      })
    //   clearInterval(timmer) // 将betterScroll给卸载掉，变量得值为null得时候，变量占得内存就被释放掉了
  }

}

export default Left